<template>
  <div class="login-view-warp">
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <div class="login-warp">
          <div class="login-logo">
            <el-row type="flex">
              <el-col :span="24">
                <div style="display:flex;justify-content:center">
                  <el-image
                  style="width: 100px; height: 100px"
                  :src="loginLogoImg"
                  fit="fit"></el-image>
                </div>
                </el-col>
            </el-row>
          </div>
          <div class="login-user-email-input-warp">
            <el-row type="flex"  align="middle">
              <el-col :span="1"><div><span><i class="fa fa-envelope-o"></i></span></div></el-col>
              <el-col :span="23"><div><input class="email-input" type="email" placeholder="请输入邮箱" v-model="inputEmail"></div></el-col>
            </el-row>
          </div>
          <div class="login-user-password-input-warp">
            <el-row type="flex"  align="middle">
              <el-col :span="1"><div><span><i class="	fa fa-lock"></i></span></div></el-col>
              <el-col :span="23"><div><input class="password-input" type="password" placeholder="请输入密码" v-model="inputPassword"></div></el-col>
            </el-row>
          </div>
          <div style="padding-top:20px">
            <el-row type="flex"  justify="space-between">
            <el-col :span="6"><div><el-link :underline="false" href="javascript:;" @click.native="forgetPasswordClick">忘记密码？</el-link></div></el-col>
            <el-col :span="6"><div style="text-align:right;"><el-link :underline="false" href="javascript:;" @click.native="registerClick">注册账号</el-link></div></el-col>
          </el-row>
          </div>
          <div style="padding-top:20px;">
            <el-tooltip content="请不要再公用电脑上勾选此项" placement="top-start" :enterable="false">
              <el-switch
              v-model="remenberMe"
              active-color="#FF69B4"
              inactive-color="#c2c2c2"
              active-text="记住我"
              >
              </el-switch>
            </el-tooltip>
          </div>
          <div class="login-btn-warp">
            <el-row type="flex">
              <el-col :span="24"><div><button class="login-btn"   @click="loginBtnClick">登录</button></div></el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-drawer
      title="成为我们的一员吧"
      :visible.sync="drawer"
      :with-header="false">
      <div class="register-warp"><register @registerCompleted="registerSuccess"></register></div>
    </el-drawer>
  </div>
</template>

<script>
import register from '@/components/register';
import {request} from '@/network/request.js';
export default {
  name: "login",
  components:{
    register
  },
  data(){
    return {
      loginLogoImg:"https://hatsune-miku-yyy-blog-static.oss-cn-chengdu.aliyuncs.com/logo.png",
      inputEmail:"",
      inputPassword:"",
      drawer: false,
      remenberMe:false,
      registerTimer:"",
      loginTimer:""
    }
  },
  methods:{
    registerSuccess(){
      let that=this;
      this.registerTimer=setTimeout(function(){
        that.drawer=false;
      },1000);
    },
    forgetPasswordClick(){
      this.$router.push('/FindPassword');
    },
    registerClick(){
      this.drawer=true;
    },
    loginBtnClick(){
      request({
        url:"/user/login",
        method:"post",
        data:{
          userEmail:this.inputEmail,
          password:this.inputPassword
        }
      }).then(res=>{
        let _that=this;
        console.log(res);
        if(res.data.verifySuccess){
            this.$message({
              showClose: true,
              message: '登录成功',
              type: 'success'
            });
            //下步操作把登录后的用户数据给vuex进行管理
            this.$store.commit({
              type:"setCurrentUser",
              userInfo:res.data.userInfo
            });
            this.$store.commit({
              type:"setIsLogin",
              isLogin:true
            });
            this.$store.commit({
              type:"setToken",
              token:res.data.token
            });
            if(this.remenberMe){
              //把用户ID存入cookies
              this.$cookies.set("currentUserId",res.data.userInfo.userId);
            }
            this.loginTimer=setTimeout(function(){
              _that.$router.push("/home");
            },2000);
        }else{
            this.$message({
              showClose: true,
                message: '错误的用户名或者密码',
                type: 'error'
              });
        }
      }).catch(err=>{
        console.log(err);
        this.$message.error('服务器无响应请稍后再试');
      })
    }
  },
  computed:{
  },
  beforeDestroy(){
    clearTimeout(this.registerTimer);
    clearTimeout(this.loginTimer);
  }
};
</script>

<style>
.login-warp {
  min-height: 830px;
}
.success {
  color: green;
}
.error {
  color: red;
}
.login-logo {
  padding: 20px 0;
}
.login-user-email-input-warp,.login-user-password-input-warp,.login-btn-warp {
  padding-top: 20px;
}
.email-input,.password-input {
  border: none;
  font-size: 16px;
  width: 100%;
  height:30px;
  border-bottom: 2px solid #ccc;
  transition: all 0.3s;
}
.email-input:focus,.password-input:focus {
  border-bottom: 2px solid #FF69B4;
  outline: none;
}
.verify-message {
  display: inline-block;
  padding-top: 10px;
}
.login-btn {
  width: 100%;
  height: 40px;
  border: 1px solid #FF69B4;
  color: #FF69B4;
  transition: all 0.3s;
  font-size:20px;
  outline:none;
  background-color: white;
}
.login-btn:hover,.login-btn:focus {
  background-color: #FF69B4;
  color: #fff;
}
.register-warp {
  padding: 20px;
}
.login-btn:active {
  transform: scale(0.9,0.9);
}
</style>